<template>
    <!--  定时任务-->
    <div class="user-manage">
        <div class="user-main">
            <div class="search-container">
                <el-form
                    ref="ruleFormRef"
                    :model="queryParams.entity"
                    label-width="80"
                    inline
                >
                    <el-form-item label="任务编码" prop="scheduleCode">
                        <el-input
                            v-model="queryParams.entity.scheduleCode"
                            maxlength="60"
                            placeholder="请输入任务编码"
                            clearable
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="任务名称" prop="scheduleName">
                        <el-input
                            v-model="queryParams.entity.scheduleName"
                            maxlength="60"
                            placeholder="请输入任务名称"
                            clearable
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="Search"
                            @click="handleQuery"
                        >
                            搜索
                        </el-button>
                        <el-button icon="Refresh" @click="handleResetQuery">
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-card shadow="never" class="table-container">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    highlight-current-row
                    border
                >
                    <el-table-column
                        v-for="(item, index) in columnData"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        min-width="120"
                        :width="item.width || ''"
                        :fixed="item.fixed || false"
                        show-overflow-tooltip
                        :resizable="false"
                        align="center"
                    >
                        <template #default="{ row }">
                            <span v-if="item.prop === 'executeResult'">
                                <el-tag
                                    v-if="row[item.prop] === 'success'"
                                    type="success"
                                    effect="dark"
                                >
                                    {{ row[item.prop] }}
                                </el-tag>
                                <el-tag
                                    v-if="row[item.prop] !== 'success'"
                                    type="danger"
                                    effect="dark"
                                >
                                    {{ row[item.prop] }}
                                </el-tag>
                            </span>
                            <span v-else>{{ row[item.prop] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <Pagination
                    v-if="total > 0"
                    v-model:total="total"
                    v-model:page="queryParams.pageNo"
                    v-model:limit="queryParams.pageSize"
                    @pagination="handleQuery"
                />
            </el-card>
        </div>
    </div>
</template>
<script setup>
defineOptions({ name: 'TaskLog' })
import { onMounted, reactive, ref, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/Pagination.vue'
import { postLogTaskList } from './api'
// 引入全局化储存
import { userStore } from '../../../store/index'

const store = userStore()
const tableLoading = ref(false)
const queryParams = reactive({
    entity: { scheduleName: '', scheduleCode: '' },
    pageNo: 1,
    pageSize: 15
})
const total = ref(0)
const columnData = ref([
    {
        label: '任务编码',
        prop: 'scheduleCode',
        width: '260'
    },
    {
        label: '任务名称',
        prop: 'scheduleName',
        width: '200'
    },
    {
        label: '执行人',
        prop: 'performer'
    },
    {
        label: '执行时间',
        prop: 'executeTime',
        width: '200'
    },
    {
        label: '执行结果',
        prop: 'executeResult'
    },
    {
        label: '结果信息',
        prop: 'resultMessage'
    },
    {
        label: '耗时(ms)',
        prop: 'costTime'
    }
])
const tableData = ref([])
const ruleFormRef = ref(null)

// 获取数据
const handleQuery = async () => {
    tableLoading.value = true
    const res = await postLogTaskList(queryParams)
    tableLoading.value = false
    if (res?.code === 200) {
        tableData.value = res.data.records || []
        total.value = res.total || 0
    }
}

// 重置表单
const handleResetQuery = () => {
    ruleFormRef.value.resetFields()
    queryParams.pageNo = 1
    handleQuery()
}
// 初始化
onMounted(() => {
    if (store.code) {
        queryParams.entity.scheduleCode = store.code
    }
    handleQuery()
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    store.setCode('')
})
</script>
<style lang="scss" scoped>
.user-manage {
    display: flex;
    height: 100%;

    .tree-main {
        width: 200px;
        background: #fff;
        padding: 10px;
    }

    .user-main {
        flex: 1;
        width: 0;
        margin-left: 10px;
    }
}
</style>
